<template>
	<swiper class="home-swiper" :current="activeIndex" @change="change">
		<swiper-item class="swiper-item" v-for="(item,index) in tab" :key="index">
			<list-item :list="listCacheData[index]" :load="load[index]" @loadmore="loadmore"></list-item>
		</swiper-item>
	</swiper>
</template>

<script>
	import {getList} from '@/common/mock/mock.js'
	import listItem from './list-item.vue'
	export default {
		name: "list",
		components: {
			listItem
		},
		props: {
			tab: {
				type: Array,
				default () {
					return []
				}
			},
			activeIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				list: [],
				listCacheData: {},
				load: {},
				pageSize: 8
			};
		},
		watch: {
			tab(newVal) {
				if (newVal.length === 0) return
				this.getList(this.activeIndex)
			}
		},
		methods: {
			loadmore(){
				if (this.load[this.activeIndex].loading === 'noMore') return
				this.load[this.activeIndex].page++;
				// console.log('触发上拉');
				this.getList(this.activeIndex)
			},
			change(e) {
				const {
					current
				} = e.detail;
				// console.log(this.tab[current].name);

				this.$emit('changed', current);
				// 当数据不存在 或者 长度是0 的情况下，才请求数据
				if (!this.listCacheData[current] || this.listCacheData[current].length === 0) {
					this.getList(current);
				}
			},
			getList(current) {
				if(!this.load[current]){
					this.load[current] ={
						page: 1,
						loading: 'loading'
					}
				}
				
				// #ifndef APP-PLUS
				// uniCloud云函数
				this.$api.get_list({
					name: this.tab[current].name,
					page: this.load[current].page,
					pageSize: this.pageSize
				}).then((res) => {
					// console.log(res);
					const {
						data
					} = res;
					if(data.length === 0){
						let oldLoad = {}
						oldLoad.loading = 'noMore'
						oldLoad.page = this.load[current].page
						this.$set(this.load,current,oldLoad)
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					// console.log('请求对象:', data);
					// this.list = data;
					// this.listCacheData[current] = data;
					
					let oldList = this.listCacheData[current] || []
					oldList.push(...data)
					
					this.$set(this.listCacheData, current, oldList)
				})
				// #endif
				
				// #ifdef APP-PLUS
				// mock数据
				getList(
					this.tab[current].name,
					this.load[current].page,
					this.pageSize
				).then((res) => {
					// console.log(res)
					if (res.length === 0) {
						this.load.loading = 'noMore'
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					this.list = res;
					
					if(res.length === 0){
						let oldLoad = {}
						oldLoad.loading = 'noMore'
						oldLoad.page = this.load[current].page
						this.$set(this.load,current,oldLoad)
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					
					let oldList = this.listCacheData[current] || []
					oldList.push(...res)
					this.$set(this.listCacheData, current, oldList)
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.home-swiper {
		height: 100%;

		.swiper-item {
			height: 100%;
			overflow: hidden;

			// .list-scroll {
			// 	height: 100%;
			// }
		}
	}
</style>